import React, { Component } from 'react'
import './index.less'
import { Tabs, Table, Row, Col, Input, Card } from 'antd'
import TeamWeekly from './teamWeekly'
import Http from '../../../axios'
const TabPane = Tabs.TabPane;
const Search = Input.Search;

export default class Project extends Component {

  state = {
    userInfo: '',
    date: '',
    viewFlag: false,
    projectWeeklyList: [],
    currentPage: 1,
    pageSize: 10,
    searchKey: ''
  }

  componentWillMount() {
    this.setState({
      userInfo: JSON.parse(window.localStorage.getItem('userInfo')),
      date: this.getWeek()
    })
    setTimeout(() => {
      this.getWeeklyArray();
    },0)
  }

  getWeek = () => {
    let str = new Date();
    let week = Math.ceil(str.getDate()/7);
    let month = str.getMonth() + 1;
    let year = str.getFullYear();
    if  (str.getDate() < 7) {
        if (str.getDay() !== 1) {
            week = 5;
            month = str.getMonth();
        }
    }
    return {year, month, week}
  }

  getWeeklyArray = () => {
    Http.request({
      url: `/projectInfo/page/${this.state.currentPage}/${this.state.pageSize}`
    }).then((resData) => {
      for (let item of resData.data.list) {
        item.username = this.state.userInfo.username
      }
      this.setState({
        projectWeeklyList: resData.data
      })
    })
  }

  getWeeklyArrayByKeyword = () => {
    Http.request({
      url: `/projectInfo/page/search/${this.state.currentPage}/${this.state.pageSize}/${this.state.searchKey}`
    }).then((resData) => {
      for (let item of resData.data.list) {
        item.username = this.state.userInfo.username
      }
      this.setState({
        projectWeeklyList: resData.data
      })
    })
  }

  viewWeekly = (record) => {
    let date = record.week;
    let yearIndex = date.indexOf('年');
    let mouthIndex = date.indexOf('月');
    let weekIndex = date.indexOf('周');
    let result = {
      year: date.substring(0, yearIndex),
      month: date.substring(yearIndex + 1, mouthIndex),
      week: date.substring(mouthIndex + 2, weekIndex)
    }
    this.setState({
      viewFlag: true,
      date: result
    })
  }

  viewBack =  () => {
    this.setState({
      viewFlag: false
    })
  }

    
  pageChange = (page, pageSize) => {
    this.setState({
      currentPage: page,
      pageSize
    })
    setTimeout(() => {
      this.getWeeklyArray();
    }, 0);
  }
  sizeChange = (current, size) => {
    this.setState({
      currentPage: current,
      pageSize: size
    })
    setTimeout(() => {
      this.getWeeklyArray();
    }, 0);
  }

  tabChange = (key) => {
    if (key === "1") {
      this.setState({
        date: this.getWeek()
      })
    }
  }

  onSearch = (value) => {
    this.setState({
      searchKey: value,
      currentPage: 1
    })
    setTimeout(() => {
      if (this.state.searchKey === "") {
        this.getWeeklyArray();
      } else {
        this.getWeeklyArrayByKeyword();
      }
    }, 0);
  }

  render() {
    const columns = [{
      title: '负责人',
      dataIndex: 'username',
      key: 'username',
    }, 
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
    }, 
    {
      title: '周报期数',
      dataIndex: 'week',
      key: 'week',
    }, 
    {
      title: '填写时间',
      dataIndex: 'date',
      key: 'date',
    }];
    return (
      <section className="base-section">
        <Tabs defaultActiveKey="1" onChange={this.tabChange}>
          <TabPane tab="填写周报" key="1">
            <Card title={`${this.state.date.year}年${this.state.date.month}月第${this.state.date.week}周`} bordered={false} >
              <TeamWeekly></TeamWeekly>
            </Card>
          </TabPane>
          <TabPane tab="查看周报" key="2">
            {
              this.state.viewFlag ? <TeamWeekly viewFlag={this.state.viewFlag} viewBack={this.viewBack}></TeamWeekly> : 
              <div>
                <Row>
                  <Col offset={19} span={5}>
                    <Search placeholder="请输入搜索内容" className="search" onSearch={this.onSearch}/>
                  </Col>
                </Row>
                <Table title={() => ''}  columns={columns} dataSource={this.state.projectWeeklyList.list} onRowClick={this.viewWeekly} 
                pagination={{defaultPageSize: 10, total: this.state.projectWeeklyList.count, showSizeChanger: true, onChange: this.pageChange, onShowSizeChange: this.sizeChange}}/>
              </div>
            }
          </TabPane>
        </Tabs>
      </section>
    )
  }
}
